<template>
  <Drawer
    class="drawer-detail"
    :visible="visible"
    :title="title"
    placement="right"
    width="1024"
    :bodyStyle="{
      padding: 0,
      backgroundColor: '#f6f6f6',
      display: 'flex',
      flexDirection: 'column',
    }"
    @close="onClose"
  >
    <Spin :spinning="loading">
      <FormDetailItem :data="data"> </FormDetailItem>
    </Spin>

    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px',
      }"
    >
      <Button style="margin-right: 12px" @click="onClose">关 闭 </Button>
    </div>
  </Drawer>
</template>

<script></script>

<script>
import { Drawer, Button, Spin } from "ant-design-vue";
import FormDetailItem from "@/components/FormDetailItem/FormDetailItem.vue";
export default {
  name: "m-search",
  props: {
    visible: { type: Boolean, required: true },
    loading: { type: Boolean, required: false },
    onClose: {
      type: Function,
      default: () => null,
    },
    title: { type: String, default: "详情" },
    data: { type: Array, required: true },
  },
  components: { Button, FormDetailItem, Drawer, Spin },
  computed: {},
  methods: {},
};
</script>
<style scoped lang="less"></style>
